<template>
    <div class="tag-nav">
        <div class="tag-nav-wrapper">
            <div class="tag-groups">
                <div v-if="loading" class="loading-state">
                    <el-skeleton :rows="3" animated />
                </div>
                <template v-else>
                    <div class="tag-row">
                        <el-tag v-for="tag in firstRow" :key="tag.id" effect="plain" class="tag-item"
                            @click="handleTagClick(tag.id)">
                            {{ tag.labelName }}
                        </el-tag>
                    </div>
                    <div class="tag-row">
                        <el-tag v-for="tag in secondRow" :key="tag.id" effect="plain" class="tag-item"
                            @click="handleTagClick(tag.id)">
                            {{ tag.labelName }}
                        </el-tag>
                    </div>
                    <div class="tag-row">
                        <el-tag v-for="tag in thirdRow" :key="tag.id" effect="plain" class="tag-item"
                            @click="handleTagClick(tag.id)">
                            {{ tag.labelName }}
                        </el-tag>
                    </div>
                </template>
            </div>

            <div class="upload-section">
                <el-button type="primary" class="upload-button" @click="handleUpload">
                    上传题目
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/userStores';
import { BusinessException } from '@/exception/BusinessException';
import { useBgwStores } from '@/stores/bgwStores';
import { PageConstant } from '@/common/Constant';

const userStore = useUserStore();
const bgwStores = useBgwStores();

// 用户信息
const { userInfo } = storeToRefs(userStore);

// 获取标签列表
const { getLableList } = bgwStores;

// 加载标志位
const loading = ref(true)
// 标签数组
const { labelList } = storeToRefs(bgwStores);
// 路由实例
const router = useRouter();

// 将标签分成三行
const firstRow = computed(() => labelList.value.slice(0, 10))
const secondRow = computed(() => labelList.value.slice(10, 20))
const thirdRow = computed(() => labelList.value.slice(20))

// 标签点击处理
const handleTagClick = (tagId: number) => {
    // 这里我们新写一个页面，用于展示标签下的所有题目
    router.push(`/baguwen/label/${encodeURIComponent(tagId)}`);
}

const handleUpload = () => {
    // 校验用户是否有新增题目的权限
    if (!userInfo.value.permissionList.includes('subject:add')) {
        throw new BusinessException("您没有权限上传题目");
    }
    router.push(PageConstant.AddBgwSubjectPage); // 跳转到添加八股的页面
};

// 获取标签数据
const fetchTags = async () => {
    try {
        loading.value = true
        await getLableList();
    } catch (error) {
        ElMessage.error('获取标签失败')
        console.error('获取标签失败:', error)
    } finally {
        loading.value = false
    }
}

// 组件加载完毕的钩子函数
onMounted(() => {
    fetchTags()
})
</script>

<style scoped>
.tag-nav {
    padding: 20px;
    background: #fff9f0;
    border-radius: 8px;
}

.left-section {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.hot-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.hot-icon {
    background-color: #ff6b00;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.tag-groups {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tag-item {
    cursor: pointer;
    border-radius: 16px;
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    background-color: white;
    border: none;
    font-size: 16px;

    &:hover {
        color: #ff6b00;
        background-color: #fff3e8;
    }
}

:deep(.el-tag) {
    border: none;
}

.loading-state {
    padding: 20px;
}

.tag-nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.upload-section {
    padding-left: 20px;
}

.upload-button {
    background-color: #ff6b00;
    border-color: #ff6b00;
    font-size: 16px;
    height: 40px;
    padding: 0 24px;
    border-radius: 20px;

    &:hover {
        background-color: #ff8533;
        border-color: #ff8533;
    }
}
</style>